# Switch

<Subtitle>A control that indicates whether a setting is on or off.</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React switch component that indicates whether a setting is on or off."
/>

import { DemoSwitchHero } from './demos/hero';

<DemoSwitchHero />

## Usage guidelines

- **Form controls must have an accessible name**: The switch must have a meaningful label. Prefer using [`<Field>`](/react/components/field) to provide a visible text label and description, or use the `aria-label` attribute as an alternative. See the [forms guide](/react/handbook/forms) for more on building form controls.

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Switch } from '@base-ui-components/react/switch';

<Switch.Root>
  <Switch.Thumb />
</Switch.Root>;
```

## API reference

<Reference component="Switch" parts="Root, Thumb" />
